<template>
<div class="container">
  <el-container>
    <Header></Header>
    <el-main>
    <div class="picture_box" >
     <img src="../assets/landscape.jpeg" class="picture">
    </div>
    <div class="usermessage">
       <div class="username">张三</div>
       <div class="ID">账号：283941</div>
    </div>
    <div class="my_functions" >
        
       <el-row style="height:50px">
         <el-col :span="6"><div class="grid-content" @click="tab=0">我的创作</div></el-col>
         <el-col :span="4"><div class="grid-content" @click="tab=1">我的收藏</div></el-col>
         <el-col :span="4"><div class="grid-content" @click="tab=2">我的资产</div></el-col>
         <el-col :span="4"><div class="grid-content" @click="tab=3">交易记录</div></el-col>
         <el-col :span="5"><div class="grid-content" @click="tab=4">我的账号</div></el-col>
       </el-row>
    </div>
    <div class="everyfunction">
      <My_create class="tab_content" v-if="tab==0">
      </My_create>
      <My_collect class="tab_content" v-if="tab==1">
      </My_collect>
      <My_property class="tab_content" v-if="tab==2">
      </My_property>
      <Trade_records class="tab_content" v-if="tab==3">
      </Trade_records>
      <My_account class="tab_content" v-if="tab==4">
      </My_account>
    </div>
    
    </el-main>
  </el-container> 
</div>
</template>

<script>
import Header from '../components/Header.vue';
import My_create from '../components/My_create.vue';
import My_collect from '../components/My_collect.vue';
import My_property from '../components/My_property.vue';
import Trade_records from '../components/Trade_records.vue';
import My_account from '../components/My_account.vue';
export default {
  components: { 
      Header,
      My_create,
      My_collect,
      Trade_records,
      My_property,
      My_account
      },
    methods:{
        
        turntocreate: function(){
            this.$router.replace('/create_center');
        }
    },
    data(){
      return{
        tab:0
      }
    }
};
</script>

<style  scoped>
.container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-main {
  background-color: #ffffff;
  text-align: center;
  /*line-height: 360px;*/
  padding: 0px 0px 0px 0px;
  position: relative;
  width: 100%;
}
.picture_box{
    height:350px;
    position: relative;
}
.picture{
    width: 100%;
    height: 100%;
}
.usermessage{
    height: 200px;
    position: relative;
}
.username{
   height:40px;
   position: relative;
   top:70px;
   font-size: 18px;
   font-weight: 600;
}
.ID{
   height:40px;
   position: relative;
   top:80px;
}

.grid-content {
    font-size: 20px;
    color: rgb(116, 114, 114);
    font-weight: 600;
}
.el-dropdown-link {
    cursor: pointer;
    color: #000000;
  }
.el-icon-arrow-down {
    font-size: 12px;
  }
.everyfunction{
  width: 100%;
  height: 600px;
  position: relative;
}
</style>
